<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<!DOCTYPE html>
  <base href="${APP_PATH}/">
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>就业专员成绩表</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<link href="public/css/bootstrap.min.css" rel="stylesheet">
<link href="public/css/materialdesignicons.min.css" rel="stylesheet">
<link href="public/css/style.min.css" rel="stylesheet">
<link rel="stylesheet" href="public/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css">
<!--日期选择插件-->
<link rel="stylesheet" href="public/js/bootstrap-datepicker/bootstrap-datepicker3.min.css">

</head>
  
<body>
<div class="lyear-layout-web">
  <div class="lyear-layout-container">
    <!--左侧导航-->
     <jsp:include page="/menu.jsp"></jsp:include>
    <!--End 左侧导航-->
    
    <!--头部信息-->
     <jsp:include page="/head.jsp"></jsp:include>
    <!--End 头部信息-->
    
    <!--页面主要内容-->
    <main class="lyear-layout-content">
      
      <div class="container-fluid">
        
        <div class="row">
          <div class="col-lg-9">
            <div class="card">
              <div class="card-toolbar clearfix">

                <form class="pull-right search-bar" method="get" role="form">
  <!--                     日期条件 -->
                 <div class="input-daterange input-group js-datepicker" data-auto-close="false" data-date-format="yyyy-mm-dd">
                  <input class="form-control" type="text" id="daterange1" name="daterange1" placeholder="从">
                  <span class="input-group-addon"><i class="mdi mdi-chevron-right"></i></span>
                  <input class="form-control" type="text" id="daterange2" name="daterange2" placeholder="至">
                </div>
<!--                     日期条件 -->  
                  <div class="input-group">
 
                    <div class="input-group-btn">
            
                      <input type="hidden" name="search_field" id="search-field" value="title">
                      <button class="btn btn-default dropdown-toggle" id="search-btn" data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">类别<span class="caret"></span>
                      </button>
                      <ul class="dropdown-menu">
<!--                         <li> <a tabindex="-1" href="javascript:void(0)" data-field="student">学生名</a> </li> -->
                        <li> <a tabindex="-1" href="javascript:void(0)" data-field="classname">班级名</a> </li>
                      </ul>
                    </div>
                    <input type="text" class="form-control"  name="keyword"  id="keyword" placeholder="请输入查询内容">
                    <div class="input-group-btn">
                     <button class='btn btn-s btn-default' type="button"  onclick="searchBy()"  title='查询' data-toggle='tooltip'><i class='mdi mdi-search-web'></i></button>
                  </div>
                  </div>
                    
                </form>
                <div class="toolbar-btn-action">
                  <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg"><i class="mdi mdi-plus"></i>新增</button>
            
                  <a class="btn btn-success m-r-5" href="#!"><i class="mdi mdi-check"></i> 启用</a>
                  <a class="btn btn-warning m-r-5" href="#!"><i class="mdi mdi-block-helper"></i> 禁用</a>
                  <a class="btn btn-danger" href="#!"><i class="mdi mdi-window-close"></i> 删除</a>
                  
                </div>
              </div>
              <div class="card-body">
                
                <div class="table-responsive">
                  <table class="table table-bordered">
                    <thead>
                      <tr>
                        <th>
                          <label class="lyear-checkbox checkbox-primary">
                            <input type="checkbox" id="check-all"><span></span>
                          </label>
                        </th>
                        <th>编号</th>
                        <th>学号</th>
                        <th>学生名</th>
                        <th>考试名</th>
                        <th>课程名</th>
                        <th>分数</th>
                        <th>操作</th>
                       
                      </tr>
                    </thead>
                    <tbody id="tbody">

                      
                    </tbody>
                  </table>
                </div>
                <ul class="pagination">
                  <li class="disabled"><span>«</span></li>
                  <li class="active"><span>1</span></li>
                  <li><a href="#1">2</a></li>
                  <li><a href="#1">3</a></li>
                  <li><a href="#1">4</a></li>
                  <li><a href="#1">5</a></li>
 
                  <li class="disabled"><span>...</span></li>
                  <li><a href="#!">8</a></li>
               
                  <li><a href="#!">»</a></li>
                </ul>
       
              </div>
            </div>
          </div>
             
<!--            饼状图 -->
             
           <div class="col-lg-3">
            <div class="card">
              <div class="card-header"><h4>成绩统计图</h4></div>
              <div class="card-body">
                <canvas id="chart-doughnut" width="280" height="280"></canvas>
              </div>
            </div>
          </div>
           
<!--            饼状图   -->
             
             
<!--              编辑模态框 -->
<div class="modal fade" id="edit">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header  bg-info" >
						<h3>学生分数修改</h3>
					</div>
					<form class="form-horizontal"   method="post" >
					<div class="modal-body">
						
							<input type="hidden" name="sidE" id="sidE"value="">
                            	<div class="input-group col-md-push-3">
                            	<br>
								<label for="score">分数&nbsp;&nbsp;&nbsp;</label>
								<input type="text" id="scoreE" name="scoreE" /><br><br>			
                            </div>
                    
						
					</div>
					 <div class="modal-footer">
					 <button type="button" class="btn btn-s btn-primary " onclick="edit()" id="update">提交</button>
					     <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					 </div>
					</form>
				</div>
			</div>
		</div>

<!--              编辑模态框 -->

<!--              编辑模态框 2-->
 
<!--                 <div class="modal fade" id="edit2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> -->
<!--                  <form class="form-horizontal" action="score/edit" method="post" > -->
<!--                   <div class="modal-dialog" role="document"> -->
<!--                     <div class="modal-content"> -->
<!--                       <div class="modal-header bg-info"> -->
<!--                         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> -->
<!--                         <h4 class="modal-title" id="myModalLabel">学生分数修改</h4> -->
<!--                       </div> -->
<!--                       <div class="modal-body"> -->
                     
<!--                      <input type="hidden" name="studentid" id="studentid"value=""> -->
<!--                             	<div class="input-group col-md-push-3"> -->
<!--                             	<br> -->
<!-- 								<label for="score">分数&nbsp;&nbsp;&nbsp;</label> -->
<!-- 								 <input type="text" id="score" name="score" /><br><br>			 -->
<!--                             </div> -->
<!--                       </div> -->
<!--                       <div class="modal-footer"> -->
<!--                         <button type="submit" class="btn btn-s btn-primary " id="update">提交</button> -->
                       
<!--                         <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> -->
                        
<!--                       </div> -->
                      
<!--                     </div> -->
<!--                   </div> -->
<!--                   </form> -->
<!--                 </div> -->
<!--              编辑模态框2 -->

<!-- 新增模态框 -->
                  <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                  <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                      <div class="modal-header  bg-info">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                        <h4 class="modal-title " id="myLargeModalLabel">新增成绩</h4>
                      </div>
                       <form action="" method="post" id="addScore">
                      <div class="modal-body">
                       
                        <div class="input-group col-md-push-4">
                        	<label for="score">学生id：&nbsp;&nbsp;&nbsp;</label>
                         <input type="text" name="studentid" id="studentid"/><br>
                        </div>
                        <div class="input-group col-md-push-4">
                        	<label for="courseid">考试id：&nbsp;&nbsp;&nbsp;</label>
                         <input type="text" name="courseid" id="courseid"/><br>
                        </div>
                        <div class="input-group col-md-push-4">
                        	<label for="examid">课程id：&nbsp;&nbsp;&nbsp;</label>
                         <input type="text" name="examid" id="examid"/><br>
                        </div>
                        <div class="input-group col-md-push-4">
                        	<label for="score">分数：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                         <input type="text" name="score" id="score"/><br>
                        </div>
 
                      
                      </div>
                      <div class="modal-footer">
                        <button type="button" id="addSubmit" onclick="addScore()" class="btn btn-primary">点击保存</button>
                        <button type="button" class="btn btn-default"  data-dismiss="modal">关闭</button> 
                      </div>
                        </form>
                    </div>
                  </div>
                </div>
       <!-- 新增模态框 -->      
             

             
        </div>
        
      </div>
         
         
          
          
    </main>
  </div>
    <!--End 页面主要内容-->

</div>

<script type="text/javascript" src="public/js/jquery.min.js"></script>
<script type="text/javascript" src="public/js/bootstrap.min.js"></script>
<script type="text/javascript" src="public/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="public/js/main.min.js"></script>
<script type="text/javascript" src="public/js/Chart.js"></script>


<!--日期选择插件-->
<script src="public/js/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script src="public/js/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<script type="public/text/javascript" src="js/main.min.js"></script>

<script type="text/javascript">

//document.ready********************************************************************/
$(function(){
    
  
    $.ajax({
		url:"${APP_PATH}/score/emp/indexDo",
		type:"post",
		success:function(data){
			
			show(data);
			doughnut(data)
			
		}
	})
	
	
	    $("#edit").on("show.bs.modal",function(e){
    	 var t=$(e.relatedTarget).data("sid");
    	 var t3=$(e.relatedTarget).data("score");
    	 var t4=String(t3)
    	 var t2 = String(t);
    	 alert("sid:  "+t2);
    	 alert("分数 :  "+t4);  	
    	 $("#sidE").val(t2);
    	 $("#scoreE").val(t4);


     })
	
	
	
     $('.search-bar .dropdown-menu a').click(function() {
         var field = $(this).data('field') || '';
         $('#search-field').val(field);
         $('#search-btn').html($(this).text() + ' <span class="caret"></span>');
     });
	
 

    
  
});
/******************************************************************/



//页面展示show方法******************************************************************/
function show(data){

	var content="";
	var count=1;
	$.each(data.scoreList,function(index,obj){
		content+="<tr><th><label class='lyear-checkbox checkbox-primary'><input type='checkbox' name='sid' value="+obj.sid+"><span></span></label></th>"
		content+="<th>"+ count++ +"</th>";
	
		$.each(data.userList,function(index,obj2){
			if(obj.studentid==obj2.uid){
			content+="<th>"+obj2.uname+"</th>"
			content+="<th>"+obj2.sno+"</th>"
			}
			})
		$.each(data.examList,function(index,obj3){
			if(obj.examid==obj3.eid){
			content+="<th>"+obj3.name+"</th>"
			}
			})
		$.each(data.courseList,function(index,obj4){
			if(obj.courseid==obj4.courseid){
				content+="<th>"+obj4.cname+"</th>"
				}
		})
		content+="<th>"+obj.score+"</th>"
		
		content+=" <th><div class='btn-group'>"
		content+="<button class='btn   btn-s  btn-default ' data-toggle='modal' data-target='#edit' data-score="+obj.score+"  data-sid="+obj.sid+" id="+obj.sid+"><i class='mdi mdi-pencil'></i>编辑</button>"
		content+="<button class='btn btn-s btn-default' onclick='deleteScore("+obj.sid+")' href='score/delete' title='删除' data-toggle='tooltip'><i class='mdi mdi-delete-forever'></i>删除</button></div></th></tr>"		
        
		
	})
	$("#tbody").html(content);	
	

}
/************************************************************************/



//搜索by ******************************************************************/



function searchBy(){
	

	var choise=$("#search-btn").text().trim();
	var daterange1=$("#daterange1").val();
	var daterange2=$("#daterange2").val();
	var uname="";
	var cname="";
	if(choise=="学生名"){
		uname=$("#keyword").val();	
	}else{
		cname=$("#keyword").val();
	}
	searchAjax(uname,cname,daterange1,daterange2)
}

function searchAjax(uname,cname,daterange1,daterange2){
	
	$.ajax({
		
		url:"${APP_PATH}/score/searchBy",
		type:"post",
		data:{"uname":uname,
			"cname":cname,
			"daterange1":daterange1,
			"daterange2":daterange2
			
		},
		
		success:function(data){
			show(data);
			doughnut(data);
		
		}
	})

}
/************************************************************************/






//饼图********************************************************************/
function doughnut(data){
	new Chart($("#chart-doughnut"), {
	    type: 'doughnut',
	    data: {
	        labels: ["红色：60分以下", "蓝色：60-80分", "橙色：80-100分"],
	        datasets: [{
	            data: [data.count1, data.count2, data.count3],
	            backgroundColor: ['rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)']
	        }]
	    },
	    options: {
	        responsive: false
	    }
	});
}
/************************************************************************/






//编辑************************************************************************/
function edit(){
	 alert("???");
	 var sid=$("#sid").val();
	 var score=$("#score").val();
	editPara(sid,score);
}

function editPara(sid,score){
	
		$.ajax({
			url:"score/editScore",
			type:"post",
			data:{"sid":sid,"score":score},
			success:function(obj){
				
					 window.location.reload();
	}
		});
	
}
/************************************************************************/
//添加************************************************************************/
 
function addScore(){
	$.ajax({
		url:"score/addScore",
		type:"post",
		data:$("#addScore").serialize(),
	   
	    success:function(obj){
	    	window.location.reload();
	    }		
	});
}
/************************************************************************/


//删除byId************************************************************************/
function deleteScore(sid){
	var flag=confirm("确认删除？");
	if(flag){
		$.ajax({
			url:"score/deleteScore",
			type:"post",
			data:{"sid":sid},
			dataType:"json",
			success:function(obj){

					 window.location.reload();
	}
		});
	}
}
/************************************************************************/



</script>
</body>
</html>